<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="content">
    <div class="form-group">
        <label class="col-sm-2 control-label">帐号 <strong class="driverVerifcateRequired">*</strong></label>
        <div class="col-sm-4">
            <input class="form-control" dbsyncer-valid="require" maxlength="32" name="username" placeholder="admin"
                   th:value="${connector?.config?.username}" type="text"/>
        </div>
        <label class="col-sm-2 control-label">密码 <strong class="driverVerifcateRequired">*</strong></label>
        <div class="col-sm-4 ">
            <input class="form-control" dbsyncer-valid="require" maxlength="32" name="password"
                   th:value="${connector?.config?.password}" type="password"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">URL <strong class="driverVerifcateRequired">*</strong></label>
        <div class="col-sm-10">
            <textarea class="form-control dbsyncer_textarea_resize_none" dbsyncer-valid="require" maxlength="1024" name="url" rows="5"
                      th:text="${connector?.config?.url} ?: 'jdbc:postgresql://127.0.0.1:5432/postgres'"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">架构名 <strong class="driverVerifcateRequired">*</strong></label>
        <div class="col-sm-4">
            <input class="form-control" dbsyncer-valid="require" maxlength="32" name="schema" placeholder="public"
                   th:value="${connector?.config?.schema} ?: 'public'" type="text"/>
        </div>
        <div class="col-sm-6"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">删除Slot <i aria-hidden="true" class="fa fa-question-circle fa_gray"
                                                        title="增量同步，停止驱动自动删除Slot"></i></label>
        <div class="col-sm-4">
            <input id="dropSlotOnCloseSwitch" name="dropSlotOnClose"
                   th:checked="${#maps.isEmpty(connector?.config?.properties) or connector?.config?.properties?.dropSlotOnClose eq 'true'}"
                   type="checkbox">
        </div>
        <label class="col-sm-2 control-label">插件</label>
        <div class="col-sm-4">
            <select class="form-control select-control" name="pluginName">
                <option value="pgoutput" th:selected="${connector?.config?.properties?.pluginName eq 'pgoutput'}">pgoutput</option>
                <option value="test_decoding" th:selected="${connector?.config?.properties?.pluginName eq 'test_decoding'}">test_decoding</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">驱动 </label>
        <div class="col-sm-10">
            <input class="form-control" name="driverClassName" readonly="true"
                   th:value="${connector?.config?.driverClassName} ?: 'org.postgresql.Driver'" type="text"/>
        </div>
    </div>

    <!-- SQL配置 -->
    <div th:replace="connector/addSQL :: content"></div>

    <div class="form-group">
        <label class="col-sm-2 control-label">SQL</label>
        <div class="col-sm-10">
            <textarea id="sql" name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192" rows="10">SELECT T1.* FROM "USER" T1</textarea>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            $('#dropSlotOnCloseSwitch').bootstrapSwitch({
                onText: "Yes",
                offText: "No",
                onColor: "success",
                offColor: "info",
                size: "normal"
            });
            // 初始化select插件
            initSelectIndex($(".select-control"), 1);
        })
    </script>
</div>

</html>